<template>
	<div class="card">
		<div class="title">
			交易注册
		</div>
		<div class="tabs">
			<div class="active">
				手机号
			</div>
			<div>
				邮箱
			</div>
			<!-- 蓝色背景 -->
			<div class="blue_"></div>
		</div>
		<template v-if="isTell">
			<div class="row_">
				<p>手机号</p>
				<div class="row_flex">
					<el-dropdown>
						<el-button type="primary" color="#fff" class="btn-tell">
							+86
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>Action 1</el-dropdown-item>
								<el-dropdown-item>Action 2</el-dropdown-item>
								<el-dropdown-item>Action 3</el-dropdown-item>
								<el-dropdown-item>Action 4</el-dropdown-item>
								<el-dropdown-item>Action 5</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<el-input v-model="tell" placeholder="请输入手机号" class="input_" />
				</div>
			</div>
			<div class="row_">
				<p>
					邀请码（选填）
					<el-icon>
						<ArrowDown />
					</el-icon>
				</p>
				<el-input v-model="inviteCode" class="h-58px " style="font-size: 18px;" placeholder="请输入邀请码" />
			</div>
		</template>
		<template v-else>
		</template>
		<div class="made">
			<p>
				<span>已有账号？</span>
				<span class="blue-font">登录</span>
			</p>
		</div>

		<div>
			<el-button class="btn" type="primary" color="#114CEE" @click="dealRegister">注册</el-button>
		</div>
		<div class="bottom">
			<span>登录即表示同意</span>
			<a href="">《用户协议》</a>
			<span>和</span>
			<a href="">《隐私条款》</a>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'

const emit = defineEmits(['register']);

const dealRegister = ()=>{
	emit('register',2);
}

const isTell = ref<boolean>(true)
const inviteCode = ref<string>('')
const tell = ref<string>('')

</script>
<style lang="scss" scoped>
.card {
			box-sizing: border-box;
			width: 25vw;
			padding: 30px;
			background: #FFF;
			border: 1px solid #E5E6EB;
			border-radius: 16px;
			height: 606px;

			>div {
				margin: 20px 0;
			}

			.title {
				margin: 30px 0;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 34px;
				font-weight: bold;
				color: #000;
			}

			.tabs {
				position: relative;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 176px;
				height: 38px;
				padding: 0 10px;
				background: #FFF;
				border: 1px solid #E5E6EB;
				border-radius: 8px;

				>div {
					z-index: 100;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #000;
				}

				.active {
					color: #fff;
				}

				.blue_ {
					position: absolute;
					top: 5%;
					left: 4px;
					z-index: 50;
					width: 56%;
					height: 90%;
					background-color: #114CEE;
					border-radius: 8px;
					
				}
			}

			.row_ {
				>p {
					margin-bottom: 10px;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #86909C;
				}

				.btn-tell {
					flex: 3;
					height: 58px;
					border: 1px solid #E5E6EB;
					border-radius: 8px;
				}

				.input_{
					flex:10;
					height: 58px;
					margin-left: 10px;
					font-size: 18px;
				}

				.row_flex{
					display: flex;
				}
			}

			.made {
				display: flex;
				justify-content: space-between;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;

				.blue-font {
					color: #114CEE;
				}
			}

			.btn {
				width: 100%;
				height: 50px;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 18px;
				font-weight: 400;
				color: #FFF;
			}

			.bottom {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;

				>a {
					color: #000;
					text-decoration: none;

					&:hover,
					&:active,
					&:focus {
						color: inherit;
						text-decoration: none;
					}
				}
			}
		}
</style>
